<template>
  <div class="practice-mgr">
    <h2>实践活动管理</h2>
    
    <el-button type="primary" @click="showAddDialog">添加实践活动</el-button>
    
    <el-table :data="practiceList" style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="praName" label="实践名称"></el-table-column>
      <el-table-column prop="praSite" label="实践地点"></el-table-column>
      <el-table-column label="实践时间">
        <template #default="{ row }">
          {{ formatDate(row.startTime) }} - {{ formatDate(row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'info'">
            {{ row.status === 1 ? '已完成' : '进行中' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="editPractice(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="cancelPractice(row.id)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 添加/编辑实践活动对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <el-form :model="practiceForm" label-width="100px">
        <el-form-item label="实践名称">
          <el-input v-model="practiceForm.praName"></el-input>
        </el-form-item>
        <el-form-item label="课程ID">
          <el-input-number v-model="practiceForm.couId" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="实践地点">
          <el-input v-model="practiceForm.praSite"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="practiceForm.startTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="practiceForm.endTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="practiceForm.status">
            <el-radio :label="1">已完成</el-radio>
            <el-radio :label="0">进行中</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePractice">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { practiceApi } from '@/api/practice'

const router = useRouter()

const practiceList = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('添加实践活动')
const isEdit = ref(false)
const practiceForm = reactive({
  id: '',
  teaId: '',
  couId: '',
  praName: '',
  praSite: '',
  praMain: '',
  startTime: null,
  endTime: null,
  status: 0
})

// 获取实践活动列表
const fetchPracticeList = async (courseId) => {
  try {
    // 实际项目中应该有获取实践活动列表的接口
    // 这里模拟数据
    const mockData = [
      {
        id: 509,
        teaId: 16,
        couId: 36,
        praName: '实验一：基础操作',
        praSite: '实验室A',
        praMain: '学习基础实验操作',
        startTime: '2025-05-15T09:00:00',
        endTime: '2025-05-15T12:00:00',
        status: 0,
        updateTime: null
      },
      {
        id: 510,
        teaId: 16,
        couId: 36,
        praName: '实验二：进阶操作',
        praSite: '实验室B',
        praMain: '学习进阶实验操作',
        startTime: '2025-05-22T09:00:00',
        endTime: '2025-05-22T12:00:00',
        status: 1,
        updateTime: null
      }
    ]
    
    // 如果传入courseId，过滤对应课程的实践活动
    practiceList.value = courseId 
      ? mockData.filter(p => p.couId === Number(courseId))
      : mockData
  } catch (error) {
    console.error('获取实践活动列表失败:', error)
  }
}

// 组件挂载时获取列表
fetchPracticeList()

// 显示添加对话框
const showAddDialog = () => {
  dialogTitle.value = '添加实践活动'
  isEdit.value = false
  Object.assign(practiceForm, {
    id: '',
    teaId: '16', // 默认教师ID
    couId: '',
    praName: '',
    praSite: '',
    praMain: '',
    startTime: null,
    endTime: null,
    status: 0
  })
  dialogVisible.value = true
}

// 编辑实践活动
const editPractice = (id) => {
  dialogTitle.value = '编辑实践活动'
  isEdit.value = true
  
  // 实际项目中应该先获取实践活动详情
  const practiceToEdit = practiceList.value.find(p => p.id === id)
  if (practiceToEdit) {
    Object.assign(practiceForm, {...practiceToEdit})
  }
  
  dialogVisible.value = true
}

// 取消实践活动
const cancelPractice = async (id) => {
  try {
    // 实际项目中应该有取消实践活动的接口
    await practiceApi.cancelPractice(id)
    ElMessage.success('已取消实践活动')
    fetchPracticeList()
  } catch (error) {
    console.error('取消失败:', error)
  }
}

// 保存实践活动
const savePractice = async () => {
  try {
    if (isEdit.value) {
      // 实际项目中应该调用更新接口
      await practiceApi.updatePractice({...practiceForm})
    } else {
      // 实际项目中应该调用保存接口
      await practiceApi.savePractice(practiceForm)
    }
    ElMessage.success('保存成功')
    dialogVisible.value = false
    fetchPracticeList()
  } catch (error) {
    console.error('保存失败:', error)
  }
}
</script>

<style scoped>
.practice-mgr {
  padding: 20px;
}
</style>